<template>
  <basic-container>
    <dataList
      placeholder="请输入报销名称"
      :pageInfo="pager"
      :listData="tableData"
      searchName="reimbursementName"
      :menuList="['add','export']"
      :filterList="filterList"
      @menu-click="handleMenuClick"
    >
      <el-table :data="tableData" align="center" ref="multipleTable">
        <el-table-column label="报销编号" align="center" prop="reimbursement_nm"></el-table-column>
        <el-table-column label="申请时间" align="cenyer" prop="req_start_time">
          <template slot-scope="scope">{{formatDate(scope.row.req_start_time) }}</template>
        </el-table-column>

        <el-table-column label="报销名称" prop="reimbursement_name"></el-table-column>
        <el-table-column prop="req_type" align="center" label="报销类型">
          <template slot-scope="scope">{{scope.row.req_type | dict('reimbursement_type')}}</template>
        </el-table-column>
        <!--      <el-table-column label="报销类型" prop="reimbursement_type"></el-table-column>-->
        <el-table-column label="申请资金（元）" prop="req_price"></el-table-column>
        <el-table-column width="200px" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleUpdate(scope.row,false)">编辑</el-button>
            <el-button type="text" @click="rowDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </dataList>
  </basic-container>
</template>

<script>
import { fetchList, delObj } from "@/views/reimbursement/api/reimbursement";
import { download } from "@/admin/api/common";
import { downloadBlob } from "@/utils";
export default {
  provide () {
    return {
      initList: this.getListData
    };
  },
  beforeMount () {
    this.getListData();
  },
  data () {
    return {
      tableData: [],
      params: {
        current: 1,
        size: 10,
        reimbursementName: ""
      },
      timeData: [],
      filterList: [
        {
          label: "报销申请时间",
          inputType: "daterange",
          name: ["applyStartTime", "applyEndTime"]
        },
        {
          label: "报销类型",
          inputType: "dict",
          dictName: "reimbursement_type",
          name: "approveTemplates",
          multiple: true
        }
      ],
      loading: false,
      multipleSelection: [],
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
      }
    };
  },
  computed: {
    //报销类型
    reimbursement_type () {
      return this.getDict("reimbursement_type");
    }
  },
  methods: {
    formatDate (date) {
      //设置时间转换格式
      date = new Date(date);
      var y = date.getFullYear(); //获取年
      var m = date.getMonth() + 1; //获取月
      m = m < 10 ? "0" + m : m; //判断月是否大于10
      var d = date.getDate(); //获取日
      d = d < 10 ? "0" + d : d; //判断日期是否大10
      return y + "-" + m + "-" + d; //返回时间格式
    },
    getListData (params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      fetchList(requestData)
        .then(res => {
          const { current, size, total, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //qh+:编辑一条数据
    handleUpdate (row) {
      this.$router.push({
        path: "/reimbursement/new/edit?id=" + row.reimbursement_id
      });
    },
    //qh+:删除一行数据
    rowDel (row) {
      var obj = {};
      obj.reimbursementId = row.reimbursement_id;
      obj.approveTemplateId = row.approve_template_id;
      obj.approveTemplate = row.reimbursement_type;
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //删除
          delObj(obj).then(response => {
            this.getListData();
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleMenuClick (type) {
      switch (type) {
        case "add":
          this.$router.push({ path: "/reimbursement/new/edit" });
          break;
        case "export":
          this.publicExport('报销记录', '/api/reimbursement/reimbursement_recording_download', this.params)
          break;
      }
    }
  }
};
</script>
